<template>
  <transition name="route-transition" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<script>

export default {
  name: 'App',
  components: {},
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = 'slide-left';
      } else {
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>
<style>
.route-transition-enter-active,
.route-transition-leave-active {
  transition: opacity 0.3s, filter 0.3s;
}

.route-transition-enter,
.route-transition-leave-to {
  opacity: 0;
  filter: blur(10px);
}

.el-loading-spinner {
  font-size: 30px;
  font-weight: bold;
}


</style>